<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul::after{
				content: '';
				width: 100px;
				height: 100px;
				background: skyblue;
			}
		</style>
	</head>
	<body>
		<ul class="ul_class" id= "ul_id" >
			<li id="li_id" class="li_class">1</li>
			<li data-number="02">
				<p>这里是p标签</p>
			</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script>
			
			(function () {
				console.log('test1');
				setTimeout(function(){
					console.log('test2');
				},0);
				console.log('test3');
				setTimeout(function(){
					console.log('test4');
				},0);
				
				//定时器是在线程空闲时间插入
			})();
			
			(function(){
				//DOM Document Object Model 文档对象模型
				//Document在Dom里面是最大的
				
				
				//查		找到元素
				//getElementById();		根据Id获取元素对象(一个)
				var ul_id = document.getElementById('ul_id');
				console.log(ul_id);
				
				//getElementsByClassName();  根据classname一个到多个	返回类数组
				var ul_class = document.getElementsByClassName('ul_class')[0]; 
				console.log(ul_class);	
				
				//getElementsByTagName();	根据标签一个到多个	 
				var li_tag = document.getElementsByTagName('li');
				console.log(li_tag);
				
				//querySelector 只返回一个元素对象
				var li_id = document.querySelector('#li_id');
				console.log(li_id);
				
				//querySelectorAll 返回所有匹配的元素对象 		类数组
				var li_class_all = document.querySelectorAll('.li_class');
				console.log(li_class_all);
				
				var li = document.querySelectorAll('li');
				console.log(li);
				
				//可以选择自定义选择器
				var li_data = document.querySelector('ul>li[data-number="02"]');
				console.log(li_data);
				
				
				var	ul_after = document.querySelector('ul::after');
				console.log(ul_after);
				
				//可以在元素对象中找到该对象包含的元素
				var p = ul_class.querySelector('[data-number="02"]').getElementsByTagName('p')[0];
				console.log(p);
				
				//下一个元素对象(兄弟) nextSibling(包含换行符)
				var next_li = p.parentNode.nextElementSibling;
				console.log(next_li);
				
				//下一个元素对象(兄弟) nextSibling(包含换行符)
				var previous_li = p.parentNode.previousElementSibling;
				console.log(previous_li);
				
				
				
				//HTMLcollection对象的集合 
				var li_all = ul_id.children;
				console.log(li_all);
							
				//找爸爸
				var li_parent1 = next_li.parentElement;
				console.log(li_parent1);
				var li_parent2 = next_li.parentNode;
				console.log(li_parent2);
			})();
			
		</script>	
	</body>
</html>
